<template>
  <div>
    <!--导航区域：Message二级路由的导航区域  -->
    <ul>
      <li>
        <router-link to="/home/message/detail?a=1&b=烤鸭"
          >声明式导航链接:query参数</router-link
        >
      </li>
      <li>
        <router-link to="/home/message/detail/10/容嬷嬷"
          >声明式导航链接:params参数</router-link
        >
      </li>
      <li>
        <router-link to="/home/message/detail/666/鲁班?a=999&b=鲁班大师"
          >声明式导航链接:即传递params参数，有传递query参数</router-link
        >
      </li>
    </ul>
    <hr />
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <button @click="goDetail(item)">编程式导航:{{ item.a }}</button>
      </li>
    </ul>
    <!-- 展示区域:展示Message二级路由的子路由地方 -->
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      list: [
        { id: 1, a: "鲁班", b: "鲁班大师" },
        { id: 2, a: "貂蝉", b: "吕布" },
        { id: 3, a: "小乔", b: "周瑜" },
      ],
    };
  },
  methods: {
    goDetail(item) {
      //可以通过VC的$router[路由器],实现路由的跳转!!!
      //VC身上的$router属性,实质它的属性值即为VueRouter类的实例。
      //VueRouter.prototype原型对象的身上有push|replace方法，他们可以实现路由的跳转！！

      //编程式导航:跳转到Detail
      //编程式导航:第一种写法【纯纯的字符串写法,这种写法以后不会用了】 query|params参数都可以
      //this.$router.push("/home/message/detail?a="+item.a+"&b="+item.b);

      //编程式导航：第二种写法【不常用】,模板字符串写法
      //this.$router.push(`/home/message/detail?a=${item.a}&b=${item.b}`);

      //第三种写法:对象写法【很重要:上面两种写法你可以忘记】
      //书写配置对象
      //传递query参数:path:设置的跳转路径  query
      //this.$router.push({path: "/home/message/detail",query:{a:item.a,b:item.b}});

      //传递params参数:记住豪哥交给你们的顺口溜,两个P犯相【不行】!!!!
      //编程式导航：路由跳转传递params参数，务必给路由命名【2个P犯相】
      this.$router.replace({name:'erha',params:{id:item.a,name:item.b}})

      //传递query|传递params
      //书写逻辑的
      // if (item.id > 1) {
      //   this.$router.push({
      //     name: "erha",
      //     query: { a: 1, b: 2 },
      //     params: { id: 4, name: 5 },
      //   });
      // }
    },
  },
};
</script>

<style scoped>
button {
  margin: 10px 0px;
}
</style>
